<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import "./Widgets/widgets.css"

// 设置静态资源路径
window.CESIUM_BASE_URL = "/"

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTkyZDVmZS03MGNiLTQ4YmQtYTUwMS02YTI0Y2E4OTE2YjciLCJpZCI6MjY1MjI2LCJpYXQiOjE3MzUyODM3MDJ9.HX2jU9DxJdbu9WYQW9iFkLTvSgJtTnBehN89Da7ImUw'

// 设置cesium默认视角
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
//   89.5,  //西边经度
//   20.4,   //南边纬度
//   110.4,  //东边经度
//   61.2  //北边纬度
// )

onMounted(() => {
  var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
  var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
  var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 是否显示信息窗口
    infoBox: false,
    // 搜索按钮
    geocoder: false,
    // home按钮
    homeButton: false,
    // 控制查看器显示模式
    sceneModePicker: false,
    // 是否显示涂层选择器
    baseLayerPicker: false,
    // 是否显示动画控件
    animation: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 全屏按钮
    fullscreenButton: false,
    // 是否显示VR控件
    // vrButton:false,
    // 是否显示时间轴控件
    timeline: false,
    // 设置天空盒子
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: require('@/assets/SkyBox/px.png'),
        negativeX: require('@/assets/SkyBox/nx.png'),
        positiveY: require('@/assets/SkyBox/ny.png'),
        negativeY: require('@/assets/SkyBox/py.png'),
        positiveZ: require('@/assets/SkyBox/pz.png'),
        negativeZ: require('@/assets/SkyBox/nz.png'),
      }
    }),
    // 
    //天地图矢量路径图  ee20013ff03e7d98b23e1251bc0b7cea
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    //   url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ee20013ff03e7d98b23e1251bc0b7cea',
    //   layer:'tdtBasicLayer',
    //   style:'default',
    //   format:'image/jpeg',
    //   tileMatrixSetID:'GoogleMapsCompatible',
    // }),
    // imageryProvider : new Cesium.OpenStreetMapImageryProvider({
    //   url: 'https://a.tile.openstreetmap.org/'
    // })

  })

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  // // 叠加影像服务
  // var imgMap = new Cesium.OpenStreetMapImageryProvider({
  //   url: 'https://a.tile.openstreetmap.org/'
  // });
  // viewer.imageryLayers.addImageryProvider(imgMap);

  // 抗锯齿
  viewer.scene.fxaa = true;
  viewer.scene.postProcessStages.fxaa.enabled = false;
  // 水雾特效
  viewer.scene.globe.showGroundAtmosphere = true;
  // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
  viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
  viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
  viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;
  viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG,
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
  ];
  viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG,
    Cesium.CameraEventType.PINCH,
    {
      eventType: Cesium.CameraEventType.LEFT_DRAG,
      modifier: Cesium.KeyboardEventModifier.CTRL,
    },
    {
      eventType: Cesium.CameraEventType.RIGHT_DRAG,
      modifier: Cesium.KeyboardEventModifier.CTRL,
    },
  ];
  // 取消默认的双击事件
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  // 叠加影像服务
  var imgMap = new Cesium.UrlTemplateImageryProvider({
    url: tdtUrl + 'DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
    subdomains: subdomains,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
  });
  viewer.imageryLayers.addImageryProvider(imgMap);

  // 叠加国界服务
  var iboMap = new Cesium.UrlTemplateImageryProvider({
    url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
    subdomains: subdomains,
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 10
  });
  viewer.imageryLayers.addImageryProvider(iboMap);



  //  将三维球定位到中国
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
    orientation: {
      heading: Cesium.Math.toRadians(348.4202942851978),
      pitch: Cesium.Math.toRadians(-89.74026687972041),
      roll: Cesium.Math.toRadians(0)
    },
    complete: function callback() {
      // 定位完成之后的回调函数
    }
  });


})

</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
